<template>
  <div class="InternetThings">
    <div class="blueTitleStyle title">智能感知设备</div>
    <div
      class="InternetThings-con"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <Nodata v-if="nodata" />
      <v-chart v-else :options="newOption" @click="clickEvent" :auto-resize="true" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { HomepageModule } from "@/store/modules/Homepage";
import Nodata from "../../../../components/Nodata/index.vue";
import { EChartOption } from "echarts";
import lodash from "lodash";
interface echartData {
  zxsl: number;
  sbzs: number;
}
@Component({ components: { Nodata } })
export default class InternetThings extends Vue {
  echartDataList: echartData[] = [];
  loading: boolean = false;

  clickEvent(params) {
    let name = params.name;
    let obj = {
      辅助设备: "fksb",
      在线监测: "zxjc",
      机器人: "jqr",
      摄像头: "sxt",
    };
    let sbfl = obj[name] || "";
    this.$router.push({
      name: "iotindex",
      params: {
        sbfl,
      },
    });
  }

  get nodata() {
    let nodata = false;
    if (this.echartDataList.length === 0 && !this.loading) {
      nodata = true;
    }
    return nodata;
  }
  public option: EChartOption = {
    xAxis: [
      {
        type: "category",
        data: ["辅助设备", "在线监测", "机器人", "摄像头"],
        axisLabel: {
          color: "#fff",
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      show: true,
      textStyle: {
        color: "#fff",
      },
      right: "8%",
      top: "3%",
      icon: "rect",
    },
    grid: {
      top: "16%",
      bottom: "12%",
    },
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#1C2E70",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        data: [100, 200, 300, 400],
        type: "bar",
        barGap: "0",
        barWidth: "15",
        name: "在线数",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4EF650", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#309A76", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        data: [100, 200, 300, 400],
        type: "bar",
        name: "总数",
        barGap: "0",
        barWidth: "15",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#3AFBF4", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#24489A", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let echartDataList = lodash.cloneDeep(this.echartDataList);
    // let FzAndZxData = this.FzAndZxData;
    if (echartDataList.length) {
      // echartDataList[0].zxsl = FzAndZxData.fzsb.zs - FzAndZxData.fzsb.fzxs;
      // echartDataList[0].sbzs = FzAndZxData.fzsb.zs;
      // echartDataList[1].zxsl = FzAndZxData.zxjc.zs - FzAndZxData.zxjc.fzxs;
      // echartDataList[1].sbzs = FzAndZxData.zxjc.zs;
      let zsArr: number[] = [];
      let zxsArr: number[] = [];
      echartDataList.forEach((v) => {
        zxsArr.push(v.zxsl);
        zsArr.push(v.sbzs);
      });
      (option as any).series[0].data = zxsArr;
      (option as any).series[1].data = zsArr;
    }

    return option;
  }

  get FzAndZxData() {
    let zxdw = GetSocketModule.getterZxdw;
    let AllAuxiliaryByXtId = GetSocketModule.getterAllAuxiliaryByXtId;
    let zxjcData = AllAuxiliaryByXtId["03"] || []; //在线监测数据
    let fzsbData = []; //辅助设备数据
    if (AllAuxiliaryByXtId["01"]) {
      fzsbData.push(...AllAuxiliaryByXtId["01"]);
    }
    if (AllAuxiliaryByXtId["02"]) {
      fzsbData.push(...AllAuxiliaryByXtId["02"]);
    }
    if (AllAuxiliaryByXtId["04"]) {
      fzsbData.push(...AllAuxiliaryByXtId["04"]);
    }
    if (AllAuxiliaryByXtId["05"]) {
      fzsbData.push(...AllAuxiliaryByXtId["05"]);
    }
    if (AllAuxiliaryByXtId["06"]) {
      fzsbData.push(...AllAuxiliaryByXtId["06"]);
    }

    let obj = {
      fzsb: {
        zs: 0,
        fzxs: 0,
      },
      zxjc: {
        zs: 0,
        fzxs: 0,
      },
    };
    let zxjcSb = {};
    let fzSb = {};
    // console.log(zxjcData,)
    zxjcData.forEach((v) => {
      let key = v.equipId;
      zxjcSb[key] = zxjcSb[key] || [];
      zxjcSb[key].push(v);
    });
    fzsbData.forEach((v) => {
      let key = v.deviceId;
      fzSb[key] = fzSb[key] || [];
      fzSb[key].push(v);
    });

    for (let key in zxjcSb) {
      let fzx = false;
      let itemArr = zxjcSb[key];
      obj.zxjc.zs++;
      // 循环设备测点
      itemArr.forEach((item) => {
        !fzx &&
          zxdw.forEach((v) => {
            // 如果测点包含在线测点
            if (item.dwValue === v) {
              if (item.value === "1") {
                fzx = true;
                obj.zxjc.fzxs++;
              }
            }
          });
      });
    }
    for (let key in fzSb) {
      let fzx = false;
      let itemArr = fzSb[key];
      obj.fzsb.zs++;
      // 循环设备测点
      itemArr.forEach((item) => {
        !fzx &&
          zxdw.forEach((v) => {
            // 如果测点包含在线测点
            if (item.dwValue === v) {
              if (item.value === "1") {
                fzx = true;
                obj.fzsb.fzxs++;
              }
            }
          });
      });
    }
    return obj;
  }
  get currentMap() {
    let mapByStation = HomepageModule.mapByStation;
    return mapByStation;
  }
  @Watch("currentMap")
  fetch() {
    this.queryIOTDevice();
  }
  mounted() {
    this.loading = true;
    this.queryIOTDevice();
  }
  // 数据请求
  queryIOTDevice() {
    let mapByStation = HomepageModule.mapByStation;
    let params: any = {};
    if (mapByStation.stationId) {
      params.bdzId = mapByStation.stationId;
    }
    (this as any).$services
      .queryIOTDevice({ data: params })
      .then((result: any) => {
        let data = result.data;
        this.echartDataList = [data.fksb, data.zxjc, data.robot, data.video];
        this.loading = false;
      })
      .catch((err: object) => {
        console.log(err);
        this.loading = false;
      });
  }
}
</script>

<style lang="scss" scoped>
.InternetThings {
  width: 100%;
  height: 100%;
  .title {
    height: 0.27rem;
    line-height: 0.27rem;
    font-size: 0.18rem;
    color: #fff;
    width: 100%;
    padding-left: 0.2rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.27rem);
    > div {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

